<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery-Mtime焦点图(已改版)">
<meta name="Description" content="SuperSlide,jQuery-Mtime焦点图(已改版)">
<title>SuperSlide - Mtime焦点图(已改版)</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>


<style type="text/css">
	/* css 重置 */
	*{margin:0; padding:0; list-style:none; }
	body{ background:#fff; font:normal 12px/22px 宋体;  }
	img{ border:0;  }
	a{ text-decoration:none; color:#333;  }
	a:hover{ color:#1974A1;  }
	.js{width:90%; margin:10px auto 0 auto; }
	.js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
	.js p span{ float:right; }
	.js p span a{ color:#f00; text-decoration:underline;   }
	.js textarea{ height:50px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }

	/* 本例子css */
	.Mtime{ width:960px; height:311px;  overflow:hidden; position:relative; background:url("images/bg_movies.jpg") no-repeat;  }
	.Mtime .prev,.Mtime .next{ width:63px; height:100%; clear:both; cursor:pointer; position:absolute; left:0px; top:0px; }
	.Mtime .next{ width:59px; left:auto; right:0px;  }
	.Mtime .tempWrap{ margin-left:63px; }
	.Mtime .MtimeCon{ width:840px; height:100%;     }
	.Mtime .tabBox{ overflow:hidden; zoom:1; }
	.Mtime .tabBox .bd{ padding: 15px 18px 15px 20px; width: 667px;  float:left;  }
	.Mtime .tabBox .bd li{ overflow:hidden; zoom:1; }
	.Mtime .tabBox .bd .text{  width: 225px; padding-right: 20px; word-wrap: break-word; float:left;  }
	.Mtime .tabBox .bd .text h3 a{ color:#86CA35; font:normal 28px/40px "Microsoft YaHei"; _font-weight:bold;  }
	.Mtime .tabBox .bd .text p{ padding-top:18px; line-height:22px; color:#fff; font-size:14px;     }
	.Mtime .tabBox .bd .imgs{ float:right;  }
	.Mtime .tabBox .hd{ width:103px; float:left; margin-top:6px;   }
	.Mtime .tabBox .hd li{ margin-top:7px; padding-left:7px;  cursor:pointer; vertical-align:middle; }
	.Mtime .tabBox .hd a{ padding:3px; display:block; height:45px; overflow:hidden;   }
	.Mtime .tabBox .hd img{ width:90px; height:45px;  }
	.Mtime .tabBox .hd li.on{ background:url("images/icoLeft.gif") 0 center no-repeat; }
	.Mtime .tabBox .hd li.on a{ background:#85CB35;  }

</style>


	<div class="Mtime" style="margin:0 auto">
		<a class="prev"></a>
		<!-- MtimeCon S -->
		<div class="MtimeCon">

		<div class="tabBox">
							<div class="bd">
							  <ul>
								<li>
									<div class="text">
									  <h3 ><a href="#">失恋有“她”就好GAY蜜的33种典型</a></h3>
									  <p>GAY蜜的种种好处，只有身临其境的女人才最能领悟，她们不仅能得到一位挚友，还会有崭新的人生观与愈发细腻的生活态度。</p>
									</div>
									<div class="imgs">
										<a > <img width="420" height="280" src="images/104213.jpg"  alt="失恋有“她”就好"></a>
									</div>
								</li>
								<li >
									<div class="text">
									  <h3 ><a href="#">日媒评选容貌最令同性憧憬男女艺人</a></h3>
									  <p >近日，日本媒体《ORICON STYLE》根据问卷调查结果，评出了日本同性憧憬的男女艺人Top10，男星榜福山雅治三连冠，女星绫濑遥受捧</p>
									</div>
									<div class="imgs"><a href="#"> <img width="420" height="280" src="images/085458.jpg"  alt="日媒评选容貌最令"></a></div>
								</li>
								<li >
									<div class="text">
									  <h3 ><a href="#">时光网口碑新片榜TOP10第6期</a></h3>
									  <p >本期将为大家推荐来自美国、伊朗、韩国和中国的10部口碑新片，包括年度华语票房黑马《失恋33天》及刚上映的动画大片《丁丁历险记》</p>
									</div>
									<div class="imgs"><a href="#"> <img width="420" height="280" src="images/092404.jpg"  alt="时光网口碑新片榜"></a></div>
								</li>
								<li >
									<div class="text">
									  <h3 ><a href="#">一周华语片剧照选文章新片再耍宝</a></h3>
									  <p >本周曝光剧照的大部分是现代片：徐静蕾黄立行搭档"亲密敌人"、周韦彤顺应节日“脱光”、文章新片继续搞怪卖萌……古装片中周迅眼神如刀。</p>
									</div>
									<div class="imgs"><a href="#"> <img width="420" height="280" src="images/083846_002.jpg"  alt="一周华语片剧照选"></a></div>
								</li>
								<li>
									<div class="text">
									  <h3 ><a href="#">时光网十一月新片观影指南</a></h3>
									  <p >11月有好莱坞视效大片《丁丁历险记》《铁甲钢拳》，也有国产力作《杨门女将》《鸿门宴》，此外华语小片《树先生》《转山》也令人惊喜</p>
									</div>
									<div class="imgs"><a href="#"> <img width="420" height="280" src="images/140911_002.jpg"  alt="时光网十一月"></a></div>
								</li>
							  </ul>
						  </div>
						  <div class="hd">
							<ul>
								<li class="on"><a   ><img src="images/055648.jpg"></a></li>
								<li><a   ><img  src="images/085458_002.jpg"></a></li>
								<li><a   ><img  src="images/091852.jpg"></a></li>
								<li><a   ><img  src="images/083846.jpg"></a></li>
								<li><a  ><img  src="images/140911.jpg"></a></li>
							</ul>
						 </div>
				</div><!-- tabBox -->

				<div class="tabBox">
				<div class="bd">
				  <ul>
					<li>
						<div class="text">
						  <h3><a href="#">特瑞·吉列姆推荐50最佳动画电影</a></h3>
						  <p>Time Out近期推出"特瑞·吉列姆50部最佳动画电影"榜单，包括迪士尼"老掉牙"经典、皮克斯“总动员”系列以及日本宫崎骏动画都包含在列</p>
						</div>
						<div class="imgs"><a href="#"> <img width="420" height="280" src="images/151033.jpg"  alt="特瑞·吉列姆推荐"></a>
						</div>
					</li>
					<li>
						<div class="text">
						  <h3><a href="#">恐惧产生的美"异形"原画作品赏</a></h3>
						  <p>让我们借H.R.吉格的原画来回顾32年前《异形》幕后故事，并进一步了解这位独一无二的艺术大师，体验一种恐惧带来的美吧！</p>
						</div>
						<div class="imgs"><a href="#"> <img width="420" height="280" src="images/103923_002.jpg"  alt="恐惧产生的美"></a>
						</div>
					</li>
					<li>
						<div class="text">
						  <h3><a href="#">阿兰德龙经典之作《独行杀手》赏析</a></h3>
						  <p>自从1967年《独行杀手》上映后，就成为无法超越的经典，不论是电影的叙事手法、影像风格，甚至阿兰德龙的衣着都成为致敬和模仿的对象</p>
						</div>
						<div class="imgs"><a href="#"> <img width="420" height="280" src="images/094344_002.jpg"  alt="阿兰德龙经典之作"></a>
						</div>
					</li>
					<li>
						<div class="text">
						  <h3><a href="#">韩年度佳片赏析《阳光姐妹淘》</a></h3>
						  <p>对于这样一部影片，我们不会计较它眼泪太多、煽情太多、假象太多，只因为它祭奠了80年代长大的一代人已经逝去的青春记忆。</p>
						</div>
						<div class="imgs"><a href="#"> <img width="420" height="280" src="images/092800_002.jpg"  alt="韩年度佳片赏析"></a></div>
					</li>
					<li>
						<div class="text">
						  <h3><a href="#">秋季日剧前瞻大牌呈献豪华盛宴</a></h3>
						  <p>如果说夏季档日剧是以青葱少年们演绎小清新作消暑餐，那秋季就是大牌们呈献的豪华盛宴。其中木村拓哉领衔的台庆剧《南极大陆》最受期待。</p>
						</div>
						<div class="imgs"><a href="#"> <img width="420" height="280" src="images/025127.jpg"  alt="秋季日剧前瞻"></a>
						</div>
					</li>
				  </ul>
				  </div>
				  <div class="hd">
						<ul>
							<li><a ><img src="images/092752.jpg"></a> </li>
							<li><a ><img src="images/103923.jpg"></a> </li>
							<li><a ><img src="images/094344.jpg"></a> </li>
							<li><a ><img src="images/092800.jpg"></a> </li>
							<li><a ><img src="images/025127_002.jpg"></a></li>
						</ul>
				 </div>
				</div><!-- tabBox -->

		</div>
		<!-- MtimeCon E -->
		<a class="next"></a>
	</div>
	<script type="text/javascript">
		jQuery(".Mtime").slide({ titCell:".MtimeNull",mainCell:".MtimeCon",effect:"leftLoop", autoPlay:false});
		jQuery(".tabBox").slide({mainCell:".bd ul"});
	</script>


	<div class="js">
		<p><span>效果参考网址：<a target="_blank" href="http://www.mtime.com/">http://www.mtime.com/</a></span>js调用：(双重SuperSlide)</p>
		<textarea>
jQuery(".Mtime").slide({ titCell:".MtimeNull",mainCell:".MtimeCon",effect:"leftLoop", autoPlay:false});
jQuery(".tabBox").slide({mainCell:".bd ul"});
		</textarea>
	</div>



</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>